<template>
	<view>
		<view class="px-3 main-bg-color position-relative" style="height: 150upx;">
			<view class="row main-text-color-bai a-center j-sb" style="height: 100upx;">
				<view class="row a-center" style="height: 126upx;">
					<view class="pl-2">
						<view class="store">
							{{items.store_name}}
						</view>
						<view class="">
							{{items.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lists">
			<view class="list_order">
				订单编号：{{details.ordernosub}}
			</view>
			<view class="list_content">
				<image :src="baseUrl+details.img"></image>
				<view class="list_info">
					<view class="list_title">{{details.title}}</view>
					<view class="list_type">{{details.params}}</view>
					<view class="list_prices">
						<view class="list_price">￥{{details.price}}</view>
						<view class="list_number">x{{details.pay_number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="detail_title">套餐详情</view>
			<block v-for="(item,index) in details.medical_items" :key="index">
				<view class="detail_list">
					<view v-if="item.state==1" class="detail_state">待</view>
					<view v-else-if="item.state==2" class="detail_stated">已</view>
					<view class="detail_list_item">{{item.medical_items}}</view>
					<view v-if="item.state==2" class="detail_time_staff">{{item.verif_time}} {{item.staff_name}}</view>
				</view>
			</block>
		</view>
		<view style="width:750upx;height:20upx;background-color:#f4f4f4;"></view>
		<view class="input_box">
			<view class="input_list">
				<text>受检人&nbsp;&nbsp;&nbsp;&nbsp;：</text>
				<view class="input">{{details.veri_people}}</view>
			</view>
			<view class="input_list">
				<text>体检地址：</text>
				<view class="input">
					<block v-for="(item,index) in details.medical_items" :key="index">
						【{{item.veri_address}}】
					</block>
				</view>
			</view>
			<view class="input_list">
				<text>电子报告：</text>
				<view class="input idcard">
					<block v-for="(item,index) in details.medical_items" :key="index">
						<image @click="preview(baseUrl+item.veri_img)" :src="baseUrl+item.veri_img"></image>
					</block>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				baseUrl:request.common.baseUrl,
				items:'',
				details:''
			}
		},
		onLoad:function(option){
			this.items=option
			uni.request({
			    url: request.common.baseUrl+'/api/agent/storeOrderDetail',
			    data: {
					ordersub_id:option.id
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
						if(res.data.code==200){
							this.details=res.data.data
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
			    }
			});
		},
		methods: {
			preview(urlimg){
				console.log(urlimg)
				let urlimgs=[]
				urlimgs.push(urlimg)
				uni.previewImage({
					urls: urlimgs,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style>
.store{
	font-size:34upx;
}
.lists{
	width:650upx;
	height:240upx;
	margin:0 50upx;
	/* border-bottom:1upx solid #efefef; */
}
.list_order{
	width:650upx;
	height:70upx;
	line-height:70upx;
	color:#999999;
}
.list_content{
	width:650upx;
	height:150upx;
}
.list_content image{
	width:180upx;
	height:120upx;
	float:left;
}
.list_info{
	float:left;
	margin-left:25upx;
}
.list_title{
	width:440upx;
	font-size:28upx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.list_type{
	width:440upx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:24upx;
	color:#999999;
}
.list_prices{
	width:440upx;
}
.list_price{
	float:left;
	font-size:28upx;
	color:#ff6101;
}
.list_number{
	float:right;
	font-size:20upx;
	color:#999999;
}
.details{
	width:650upx;
	margin:0 50upx;
}
.detail_title{
	font-size:26upx;
	color:#666666;
	height:60upx;
	line-height:60upx;
}
.detail_list{
	width:650upx;
	height:60upx;
}
.detail_stated{
	width:44upx;
	height:44upx;
	line-height:44upx;
	font-size:20upx;
	float:left;
	background-color:#33cc00;
	border-radius:50%;
	color:#FFFFFF;
	text-align:center;
}
.detail_state{
	width:44upx;
	height:44upx;
	line-height:44upx;
	font-size:20upx;
	float:left;
	background-color:#bacae4;
	border-radius:50%;
	color:#FFFFFF;
	text-align:center;
}
.detail_list_item{
	float:left;
	text-indent:10upx;
	font-size:20upx;
	color:#999999;
	height:50upx;
	line-height:50upx;
	width:380upx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.detail_time_staff{
	float:right;
	width:220upx;
	height:50upx;
	line-height:50upx;
	font-size:20upx;
	color:#999999;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:right;
}

.input_box{
	width:650upx;
	padding:0 50upx 50upx 50upx;
}
.input_list{
	width:650upx;
	height:60upx;
	padding-top:20upx;
	padding-bottom:20upx;
	/* text-indent:20upx; */
	/* border-bottom:1upx solid #e5e9e8; */
}
.input_list text{
	float:left;
	color:#999999;
	font-size:24upx;
	height:60upx;
	line-height:60upx;
}
.input_list .input{
	float:left;
	width:500upx;
	color:#666666;
	font-size:24upx;
	display:inline-block;
	overflow:unset;
	/* height:60upx; */
	line-height:60upx;
	/* overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap; */
}
.idcard text{
	float:right;
}
</style>
